<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title>天天生鲜-商品详情</title>
		<link rel="stylesheet" href="/css/style.css">
		<link rel="stylesheet" href="/css/reset.css">
		<link rel="stylesheet" href="/css/main.css">
	</head>
	
	<body>
		<div id="app">
			<div class="header_con">
				<div class="header">
					<div class="welcome fl">欢迎来到天天生鲜!</div>

					<div class="fr">
						<div class="login_info fl" v-if="isLogin">
							欢迎您：<em>{{user.nickname}}</em>
							<span>&emsp;|&emsp;</span>
						</div>

						<div class="login_btn fl" v-if="!isLogin">
							<a href="/login.html">登录</a>
							<span>|</span>
							<a href="/register.html">注册</a>
						</div>

						<div class="user_link fl" v-else>
							<a href="/html/cart.html">我的购物车</a>
							<span>|</span>
							<a href="/html/user_center.html">用户中心</a>
							<span>|</span>
							<a href="javascript:;" @click="logout">退出登录</a>
						</div>
					</div>
				</div>
			</div>

			<div class="search_bar clearfix">
				<a href="/" class="logo fl"><img src="/images/logo.png"></a>

				<div class="search_con fl">
					<input class="input_text fl" v-model="search" placeholder="搜索商品" />
					<input type="button" class="input_btn fr" value="搜索" @click="select" />
				</div>

				<div class="guest_cart fr">
					<a href="/html/cart.html" class="cart_name fl">我的购物车</a>
					<div class="goods_count fl" id="show_count">{{count}}</div>
				</div>
			</div>

			<div class="navbar_con">
				<div class="navbar clearfix">
					<div class="subnav_con fl">
						<h1>全部商品分类</h1>
						<span></span>
						<ul class="subnav">
							<li v-for="c in categoryArr">
								<a :href="'/list.html?category_id=' + c.id" :class="c.cls">{{c.name}}</a>
							</li>
						</ul>
					</div>

					<ul class="navlist fl">
						<li><a href="/">首页</a></li>
						<li class="interval">|</li>
						<li><a href="/">手机生鲜</a></li>
						<li class="interval">|</li>
						<li><a href="/">抽奖</a></li>
					</ul>
				</div>
			</div>

			<div class="breadcrumb">
				<a href="#">全部分类</a>
				<span>></span>
				<a href="#">新鲜水果</a>
				<span>></span>
				<a href="#">商品详情</a>
			</div>

			<div class="goods_detail_con clearfix">
				<div class="goods_detail_pic fl">
					<img :src="product.imgUrl" width="350" />
				</div>

				<div class="goods_detail_list fr">
					<h3>{{product.name}}</h3>
					<p>{{product.description}}</p>
					<div class="prize_bar">
						<span class="show_pirze">¥<em>{{product.price}}</em></span>
						<span class="show_unit">单  位：{{product.unit}}</span>
					</div>

					<div class="goods_num clearfix">
						<div class="num_name fl">数 量：</div>

						<div class="num_add fl">
							<input class="num_show fl" v-model="cart.quantity" />
							<a href="javascript:;" class="add fr" @click="plus">+</a>
							<a href="javascript:;" class="minus fr" @click="subtract">-</a>
						</div>
					</div>

					<div class="total">
						总价：<em>{{ ((product.price * 100) * cart.quantity) / 100 }}元</em>
					</div>

					<div class="operate_btn">
						<a href="javascript:;" class="buy_btn" @click="buy">立即购买</a>
						<a href="javascript:;" class="add_cart" id="add_cart" @click="toCart">加入购物车</a>
					</div>
				</div>
			</div>

			<div class="main_wrap clearfix">
				<div class="l_wrap fl clearfix">
					<div class="new_goods">
						<h3>新品推荐</h3>

						<ul>
							<li v-for="recommend in recommends">
								<a :href="'/html/detail.html?id=' + recommend.id">
									<img :src="recommend.imgUrl">
								</a>
								<h4><a :href="'/html/detail.html?id=' + recommend.id">{{recommend.name}}</a></h4>
								<div class="prize">￥{{recommend.price}}</div>
							</li>
						</ul>
					</div>
				</div>

				<div class="r_wrap fr clearfix">
					<ul class="detail_tab clearfix">
						<li :class="tabIndex == 0 ? 'active' : ''" @click="show(0)">商品介绍</li>
						<li :class="tabIndex == 1 ? 'active' : ''" @click="show(1)">评论</li>
					</ul>

					<div class="tab_content">
						<dl v-if="tabIndex == 0">
							<dt>商品详情：</dt>
							<dd>{{product.detail}}</dd>
						</dl>

						<dl v-if="tabIndex == 1">
							<div class="pinln" v-for="comm in comments">
								<div class="xinx">
									<div class="text">
										{{comm.content}}
									</div>

									<div class="tm-m-photos">
										<ul class="tm-m-photos-thumb">
											<li v-for="image in comm.images">
												<img :src="image.url" />
											</li>
										</ul>
									</div>

									<div class="time">{{comm.created}}</div>
								</div>

								<div class="fenlei">颜色分类：<span>深蓝色</span></div>

								<div class="name">{{comm.user.nickname}}</div>
							</div>
						</dl>
					</div>
				</div>
			</div>
		</div>

		<div class="add_jump"></div>

		<div class="footer">
			<div class="foot_link">
				<a href="#">关于我们</a>
				<span>|</span>
				<a href="#">联系我们</a>
				<span>|</span>
				<a href="#">招聘人才</a>
				<span>|</span>
				<a href="#">友情链接</a>		
			</div>

			<p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
			<p>电话：010-****888    京ICP备*******8号</p>
		</div>
		
		<script src="/js/jquery.min.js"></script>
		<script src="/js/axios.min.js"></script>
		<script src="/js/vue.js"></script>
		<script src="/js/detail.js"></script>
	</body>
</html>